<template>
  <div class="#app">
    <el-card>
      <!-- 2.1 顶部操作 -->

      <el-row :gutter="20">

        <el-col :span="4">
          
          <el-select v-model="queryInfo.reserveStatus" placeholder="状态" clearable @clear="getList" @change="getList">
            <el-option label="预定" value="0"></el-option>
            <el-option label="入住" value="1"></el-option>
            <el-option label="取消" value="2"></el-option>
          </el-select>
          <!-- <el-input v-model="queryInfo.roomStatus" placeholder="状态"></el-input> -->
         
        </el-col>

        <el-col :span="6">
          <!-- 使用clearable属性即可得到一个可清空的输入框   clear	在点击由 clearable 属性生成的清空按钮时触发-->    
          <el-input
            placeholder="请输入预订人名字"
            v-model="queryInfo.query"
            class="input-with-select"
            clearable
            @clear="getList"
          >
            <template #append>
              <el-button icon="el-icon-search" @click="getList"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddDialog">添加</el-button>
          <el-button type="primary" @click="deleteBlogs(multipleSelection)"
            >批量删除</el-button
          >
        </el-col>
      </el-row>

      <el-table
        :data="list"
        border
        stripe
        @selection-change="handleSelectionChange"
      >
        <!-- 索引列 -->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column label="预定单号" prop="orderId"></el-table-column>

        <el-table-column label="预订人" prop="reservePerson"></el-table-column>

        <el-table-column label="预定时间" align="center" width="120px">
          <template slot-scope="{ row }">
            <span>{{ row.createdTime | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remarks"></el-table-column>
        <el-table-column label="预定状态" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="statusType[row.reserveStatus]">{{
              status[row.reserveStatus]
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="操作" align="center" min-width="200px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="showDetailDialog(scope.row.id)"
              :disabled="scope.row.reserveStatus !== 0"
              >入住办理
            </el-button>
            <el-button
              size="mini"
              type="info"
              icon="el-icon-close"
              @click="cancelReserve(scope.row)"
              :disabled="scope.row.reserveStatus !== 0"
              >取消预定
            </el-button>

            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="removeById(scope.row.id)"
              >删除
            </el-button>
            <!-- {{scope.row}} -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 2.3 分页 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-size="queryInfo.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 3.弹框区域 -->

    <!-- 添加框 -->
    <!-- modify -->
    <el-dialog
      title="添加"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <el-form
        :model="addReserveForm"
        ref="addReserveFormRef"
        :rules="addReserveFormRules"
        label-width="100px"
      >
        <!-- <el-form-item label="预定单号" prop="orderId ">
          <span>{{ addReserveForm.orderId }}</span>
        </el-form-item> -->
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="预订人" prop="reservePerson ">
          <el-input v-model="addReserveForm.reservePerson"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="预定状态">
          <el-select
            v-model="addReserveForm.reserveStatus"
            class="filter-item"
            placeholder="Please select"
            disabled
          >
            <el-option
              v-for="(item, index) in status"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        
        
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="addReserveForm.remarks"></el-input>
        </el-form-item>
        <!-- </el-form>
        
        <el-form
          :model="addOrderForm"
          ref="addOrderFormRef"
          :rules="addOrderFormRules"
          label-width="100px"
        > -->
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="房间类型">
                   <el-select
                     v-model="addReserveForm.roomType"
                     class="filter-item"
                     placeholder="Please select"
                     @change="getRooms(addReserveForm.roomType)"
                   >
                     <el-option
                       v-for="item in roomType"
                       :key="item.id"
                       :label="item.type"
                       :value="item.id"
                     />
                   </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="房间编号">
                   <el-select
                     v-model="addReserveForm.roomId"
                     class="filter-item"
                     placeholder="Please select"
                   >
                     <el-option
                       v-for="item in rooms"
                       :key="item.id"
                       :label="item.roomId"
                       :value="item.id"
                     />
                   </el-select>
                  </el-form-item>
              </el-col>
              
            </el-row>
            <el-row :gutter="24">
              
                <el-col :span="12">
                <el-form-item label="入住人数" prop="checkinNumber">
                  <el-input v-model.number="addReserveForm.checkinNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                  <el-form-item label="订金" prop="deposit ">
                    <el-input v-model="addReserveForm.deposit">
                      <template slot="prepend">￥</template>
                    </el-input>
                  </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="会员Id" prop="memberId ">
                  <el-input v-model="addReserveForm.memberId"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="reservePerson ">
                  <el-input v-model="addReserveForm.contactTel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="时间"> 
              <el-date-picker
                 v-model="time"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作员" prop="operator">
              <el-input v-model="addReserveForm.operator"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="24">
              <el-form-item label="房价">
              <el-col :span="16">
              <el-radio-group v-model="choosePrice" size="medium" @change="chooseRoomPrice()">
              <el-radio-button label="标准价格"></el-radio-button>
               <el-radio-button label="折后价格"></el-radio-button>
               <el-radio-button label="普通会员价"></el-radio-button>
               <el-radio-button label="vip会员价"></el-radio-button>
               </el-radio-group> 
              </el-col>
              <el-col :span="8">
                  <el-input v-model="addReserveForm.roomPrice" disabled>
                      <template slot="prepend">￥</template>
                    </el-input>
              </el-col>
              </el-form-item> 
            </el-row>
            </el-form>
            <!-- 底部 -->
            <span slot="footer" class="dialog-footer">
         <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
          <el-button type="primary" @click="consoleLog">dddddddddddd</el-button>
        </span>
    </el-dialog>
    <!-- 编辑框-->
    <!-- modify -->
    <!-- <el-dialog
      title="编辑角色"
      :visible.sync="reserveDialogVisible"
      width="50%"
      @close="reserveDialogClosed"
    >
      <el-form
        :model="reserveForm"
        ref="reserveFormRef"
        :rules="reserveFormRules"
        label-width="100px"
      >
        <el-form-item label="字典名称" prop="name ">
          <el-input v-model="reserveForm.name"></el-input>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="reserveForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reserveDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </span>
    </el-dialog> -->



    <!-- 详情框 -->
    <el-dialog
      title="编辑角色"
      :visible.sync="detailDialogVisible"
      width="50%"
      @close="detailDialogClosed"
    >
      <el-form
        :model="reserveForm"
        ref="reserveFormRef"
        :rules="reserveFormRules"
        label-width="100px"
      >
        <el-form-item label="预定单号" prop="orderId ">
          <span>{{ reserveForm.orderId }}</span>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="预订人" prop="reservePerson ">
          <el-input v-model="reserveForm.reservePerson"></el-input>
        </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="预定状态">
          <el-select
            v-model="reserveForm.reserveStatus"
            :key="status[reserveForm.reserveStatus]"
            class="filter-item"
            placeholder="Please select"
          >
            <el-option
              v-for="(item, index) in status"
              :key="index"
              :label="item"
              :value="index"
            />
          </el-select>
        </el-form-item>
          </el-col>
        </el-row>
        
        
        <el-form-item label="备注" prop="remarks">
          <el-input type="textarea" v-model="reserveForm.remarks"></el-input>
        </el-form-item>
        </el-form>
        
        <el-form
          :model="orderForm"
          ref="orderFormRef"
          :rules="orderFormRules"
          label-width="100px"
        >
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="房间类型">
                   <el-select
                     v-model="orderForm.roomType"
                     class="filter-item"
                     placeholder="Please select"
                     @change="getRooms(orderForm.roomType)"
                   >
                     <el-option
                       v-for="item in roomType"
                       :key="item.id"
                       :label="item.type"
                       :value="item.id"
                     />
                   </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="12">
                 <el-form-item label="房间编号">
                   <el-select
                     v-model="orderForm.roomId"
                     class="filter-item"
                     placeholder="Please select"
                     @change="chooseRoomPrice(orderForm.roomId)"
                   >
                     <el-option
                       v-for="item in rooms"
                       :key="item.id"
                       :label="item.roomId"
                       :value="item.id"
                     />
                   </el-select>
                  </el-form-item>
              </el-col>
            </el-row>


            <el-row :gutter="24">
              
                <el-col :span="8">
                <el-form-item label="入住人数" prop="checkinNumber">
                  <el-input v-model.number="orderForm.checkinNumber" @input="modifyPeople(orderForm.checkinNumber)"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="订金" prop="deposit">
                    <el-input v-model="orderForm.deposit">
                      <template slot="prepend">￥</template>
                    </el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否需要早餐">
                  <el-radio-group v-model="radio">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="会员Id" prop="memberId ">
                  <el-input v-model="orderForm.memberId"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="reservePerson ">
                  <el-input v-model="orderForm.contactTel"></el-input>
                </el-form-item>
              </el-col>
            </el-row>


            <!-- <el-form-item 
            :label="'入住人'+(index+1)" 
            v-for="(people,index) in orderForm.peopleList" 
            :key="index" 

            >
              <el-row>
                <el-col :span="4">
              <el-input v-model="people.name" placeholder="请输入姓名"></el-input>
                </el-col>
                <el-col :span="20">
                  <el-input placeholder="请输入证件号码" v-model="people.idNumber" class="input-with-select">
              <el-select v-model="people.idType" slot="prepend" placeholder="请选择证件类型" style="width: 160px; ">
                <el-option v-for="(item,index) in idType" :key="index" :label="item" :value="index"></el-option>
              </el-select>
             </el-input>
                </el-col>
              </el-row>
             
            </el-form-item> -->
            <el-form-item 
            :label="'入住人'+(index+1)" 
            v-for="(people,index) in orderForm.peopleList" 
            :key="index" 
            >
              <el-row>
                <el-col :span="4">
                     <el-input v-model="people.name" placeholder="请输入姓名" @input="reflash($event)"></el-input>
                </el-col>
                <el-col :span="20">
                  
                  <el-input placeholder="请输入证件号码" v-model="people.idNumber" class="input-with-select" @input="reflash($event)">
              <el-select v-model="people.idType" slot="prepend" placeholder="请选择证件类型" style="width: 160px; " @change="reflash($event)">
                <el-option v-for="(item,index) in idType" :key="index" :label="item" :value="index"></el-option>
              </el-select>
             </el-input>
                </el-col>
              </el-row>
             
            </el-form-item>


            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="时间"> 
              <el-date-picker
                 v-model="time"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="timeChange"
                  >
                </el-date-picker>
            </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="操作员" prop="operator">
              <el-input v-model="orderForm.operator"></el-input>
            </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="24">
              <el-form-item label="房价">
              <el-col :span="16">
              <el-radio-group v-model="choosePrice" size="medium" @change="chooseRoomPrice()">
              <el-radio-button label="标准价格"></el-radio-button>
               <el-radio-button label="折后价格"></el-radio-button>
               <el-radio-button label="普通会员价"></el-radio-button>
               <el-radio-button label="vip会员价"></el-radio-button>
               </el-radio-group> 
              </el-col>
              <el-col :span="8">
                  <el-input v-model="orderForm.roomPrice" disabled class="price-view">
                      <template slot="prepend">￥</template>
                    </el-input>
              </el-col>
              </el-form-item> 
            </el-row>
            <el-form-item label="总金额">
              <el-input v-model="orderForm.totalPrice" disabled class="price-view">
                      <template slot="prepend" style="color: #ebf24e">￥</template>
                    </el-input>
            </el-form-item>
            </el-form>
            <!-- 底部 -->
            <span slot="footer" class="dialog-footer">
         <el-button @click="detailDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="checkIn()">入 住</el-button>
          <!-- <el-button type="primary">暂时保存</el-button>
          <el-button type="primary" @click="consoleLog">dddddddddddd</el-button> -->
        </span>
        </el-dialog>
  </div>
</template>
         
<script>
import {
  fecthList,
  add,
  update,
  deleteOne,
  deleteByIds,
  getById,
  getRoomType,
  getRooms,
  getRoomInfoByRoomId,
  addReserve,
  checkIn,
  cancelReserve
} from "../../api/room_reserve";
export default {
  data() {
    return {
      queryInfo: {
        reserveStatus: null,
        query: "",
        pageNum: 1,
        pageCount: 10,
      },
      list: [],
      total: 0,
      radio: 1,
      // 添加框
      addDialogVisible: false,
      adddialog: [],
      // modify
      addReserveForm: {
        // orderId: "",
        reservePerson: "",
        reserveStatus: 0,
        remarks: "",
        roomId: null,
        memberId: "",
        roomPrice: "",
        deposit: "",
        contactTel: "",
        arrivedTime: "",
        departureTime: "",
        checkinNumber: "",
        operator: ""
      },
      addReserveFormRules: {

      },
      
      //详情框
      reserveDialogVisible: false,
      // modify
      reserveForm: {
        orderId: "",
        reservePerson: "",
        reserveStatus: "",
        createdTime: "",
        remarks: "",
      },
      // modify
      reserveFormRules: {},

      detailDialogVisible: false,
      // modify
      orderForm: {
        roomId: undefined,
        memberId: "",
        roomPrice: "",
        deposit: "",
        peopleList: [],
        contactTel: "",
        arrivedTime: "",
        departureTime: "",
        checkinNumber: "",
        // breakfastServed: 0,
        totalPrice: 0,
        operator: "",
      },
      // modify
      orderFormRules: {
        checkinNumber:[
          {required: true, message: "入住人数", trigger: "blur"},
          {type: 'number', message: "人数必须为数字值", trigger: "blur"},
          {pattern: /^(0|[1-9]\d?|100)$/,message: '范围在1-6', trigger: "blur"}
        ]
        // deposit: [{
        //   required: true, message: "押金" ,trigger: "blur"
        // }],
        // peopleList: [
        //   {required: true,message: "入住人", trigger: "blur"}
        // ],
        // peopleName: [
        //   {required: true, message: "姓名不能为空", trigger: "blur"}
        // ],
        // peopleNumber: [
        //   {required: true, message: "证件号码不能为空", trigger: "blur"}
        // ]
      },

      roomInfoForm: {
        roomId: undefined,
        roomStatus: "",
        standPrice: "",
        discountPrice: "",
        standMemberPrice: "",
        vipMemberPrice: "",
      },
      rooms: [],
      roomInfoFormRules: {},
      choosePrice: "标准价格",
      statusType: ["warning", "success", "info"],
      status: ["预定", "入住", "取消"],
      idType: ["中国居民身份证", "外国人永久居留身份证", "港澳台居民居住证"],
      time: [],
      roomType: [],
      radio: 0,
      multipleSelection: [],
      ids: [],
    };
  },
  created() {
    this.getList();
    this.getRoomType();
  },
  //方法
  methods: {

    consoleLog(){
      // console.log("时间",this.time)
      // console.log("房价",this.orderForm.roomPrice)
      // console.log(this.roomInfoForm)
      // console.log("idtype",this.orderForm.idType)
      console.log("list",this.orderForm.peopleList)
      // console.log("breakfastServed",this.redio)
    },

    reflash(e) {
      this.$forceUpdate();
      // this.consoleLog()
    },

    getRooms(roomType){
      getRooms(roomType).then(res => {
        this.rooms = res.data
        this.orderForm.roomId = this.rooms[0].roomId;
        this.addReserveForm.roomId = this.rooms[0].roomId;
        this.orderForm.roomPrice = this.rooms[0].standPrice;
        this.addReserveForm.roomPrice = this.rooms[0].standPrice;
      })
    },
    timeChange(){
      // console.log("time",this.time)
      this.orderForm.arrivedTime = this.time[0]
      this.orderForm.departureTime = this.time[1]
      var dateBegin = new Date(this.orderForm.arrivedTime);
          var dateEnd = new Date(this.orderForm.departureTime);
          var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
          var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
           this.orderForm.totalPrice = this.orderForm.roomPrice * dayDiff
    },
    chooseRoomPrice(){
      var dateBegin = new Date(this.orderForm.arrivedTime);
          var dateEnd = new Date(this.orderForm.departureTime);
          var dateDiff = dateEnd.getTime() - dateBegin.getTime();//时间差的毫秒数
          var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));
      switch(this.choosePrice){
        case '标准价格':
          this.orderForm.roomPrice = this.rooms[0].standPrice
          this.addReserveForm.roomPrice = this.rooms[0].standPrice
          
          this.orderForm.totalPrice = this.orderForm.roomPrice * dayDiff
          // console.log(this.orderForm.roomPrice)
          break;
        case '折后价格':
          this.orderForm.roomPrice = this.rooms[0].discountPrice
          this.addReserveForm.roomPrice = this.rooms[0].discountPrice
           this.orderForm.totalPrice = this.orderForm.roomPrice * dayDiff
            break;
        case '普通会员价':
              this.orderForm.roomPrice = this.rooms[0].standMemberPrice
              this.addReserveForm.roomPrice = this.rooms[0].standMemberPrice
               this.orderForm.totalPrice = this.orderForm.roomPrice * dayDiff
            break;
        case 'vip会员价':
            this.orderForm.roomPrice = this.rooms[0].vipMemberPrice
            this.addReserveForm.roomPrice = this.rooms[0].vipMemberPrice
             this.orderForm.totalPrice = this.orderForm.roomPrice * dayDiff
          break;
          default:
            break;
      }
    },

    getRoomType(){
      getRoomType().then(res=>{
        // res.data.forEach(element => {
        //   // console.log("房间类型",element.type)
        //   this.roomType.push(element.type)
        // });
        // console.log(this.roomType)
        this.roomType=res.data
        
      })
    },

    //查询  async  await
    getList() {
      //{k1:v1,k2:v2}  ---> ?k1=v1&k2=v2    query=&pagenum=1&pagesize=10
      // console.log(this.queryInfo, this.$qs.stringify(this.queryInfo));
      fecthList(this.queryInfo).then((response) => {
        this.list = response.data.records;
        this.total = response.data.total;
        setTimeout(() => {}, 1.5 * 1000);
      });
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryInfo.pagesize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.pagenum = val; // 获取新页码
      this.getList();
    },
    // 详情
    showDetailDialog(id) {
      getById(id).then((response) => {
        // console.log("预定信息", response.data);
        this.reserveForm = response.data.reserveInfo; // 对象复制
        this.orderForm = response.data.orderInfo;
        Object.assign(this.orderForm,{
          'peopleList': [
            {
              orderId: this.reserveForm.orderId,
              idType: 0,
              idNumber: "",
              name: ""
            }
          ],
          'breakfastServed': 0,
          'totalPrice': 0
        })
        this.roomInfoForm = response.data.roomInfo;
        this.time.push(this.orderForm.arrivedTime);
        this.time.push(this.orderForm.departureTime);
        // console.log("房价",this.roomPrice)
        console.log("订单信息",this.orderForm)
        // console.log("订单信息",this.orderForm.roomId)
        this.modifyPeople(this.orderForm.checkinNumber)
        getRooms(this.orderForm.roomType).then(res=>{
           this.rooms = res.data
        })
        if(this.orderForm.roomId === null){
          this.orderForm.roomId = this.rooms[0].roomId;
          getRoomInfoByRoomId(this.rooms[0].roomId).then(res =>{
            this.roomInfoForm = res.data.roomInfo;
          })
        }
        
        this.timeChange()
        // console.log("rooms",this.orderForm.roomId)
      });
      // this.getRooms(orderForm.roomType)
      this.detailDialogVisible = true;
    },
    detailDialogClosed() {
      this.time = [];
      this.$refs.reserveFormRef.resetFields();
      this.$refs.orderFormRef.resetFields();
      // this.$refs.roomInfoFormRef.resetFields();
      
    },
    // 添加入住人
    modifyPeople(num) {
      
      let listLength = this.orderForm.peopleList.length
      // console.log("l",listLength)
      if(num>6 || num <1) return;
      for(var i =  listLength; i < num ; i++){
        this.orderForm.peopleList.push({
          orderId: this.reserveForm.orderId,
          idType: 0,
          idNumber: "",
          name: ""
        });
      }
        // console.log(this.orderForm.peopleList)
        if(num < listLength){
          this.orderForm.peopleList.splice(num,listLength-num)
          // console.log(this.orderForm.peopleList)
        }
      },

    //添加
    //弹框
    showAddDialog() {
      this.addDialogVisible = true;
    },

    add() {
      this.$refs.addReserveFormRef.validate(async (valid) => {
        console.log(valid);

        if (!valid) return;
        console.log("time",this.time)
        this.addReserveForm.arrivedTime = this.time[0]
        this.addReserveForm.departureTime = this.time[1]
        console.log(this.addReserveForm);

        addReserve(this.addReserveForm).then(() => {
          this.$notify({
            title: "添加成功",
            type: "success",
            duration: 2000,
          })
          this.getList()
          this.addDialogVisible = false
        });
      });
    },

    // @close="addDialogClosed"
    addDialogClosed() {
      console.log(this.$refs); //可以获取所有带ref属性的元素
      this.$refs.addReserveFormRef.resetFields(); //清空表单
    },
    // 入住 
    checkIn(){
      this.$refs.reserveFormRef.validate(async (valid) => {
        if (!valid) return;
        this.orderForm.orderId=this.reserveForm.orderId
        this.orderForm.breakfastServed = this.radio
        console.log("入住信息",this.orderForm)
      checkIn(this.orderForm).then(()=>{
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2000,
          });
          this.detailDialogVisible=false
          this.getList()
       })
      
      })
    },

    //更新
    showReserveDialog(id) {
      getById(id).then(() => {
        console.log(res.data);
        this.reserveForm = res.data; // 对象复制
        this.reserveDialogVisible = true;
      });
    },
    update() {
      this.$refs.reserveFormRef.validate(async (valid) => {
        if (!valid) return;
        update(this.reserveForm).then((response) => {
          const index = this.list.findIndex(
            (v) => v.id === this.reserveForm.id
          );
          this.list.splice(index, 1, this.reserveForm);
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 200,
          });
        });
        // 关闭对话框
        this.reserveDialogVisible = false;
        // 刷新数据列表
        this.getList();
      });
    },

    reserveDialogClosed() {
      this.$refs.reserveFormRef.resetFields();
    },

    cancelReserve(data){
      data.reserveStatus = 2
      cancelReserve(data).then(()=>{
        this.$notify({
          title: "取消预定成功",
            type: "success",
            duration: 2000,
        })
        this.getList()
      })
    },
    removeById(id) {
      this.$confirm("此操作将永久删除数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 删除逻辑
          deleteOne(id).then(() => {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    

    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    deleteBlogs(val) {
      val.forEach((element) => {
        this.ids.push(element.id);
      });
      console.log(this.ids);

      deleteByIds(ids).then(() => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
          duration: 2000,
        });
        this.ids = [];

        this.getList();
      });
    },
  },
};
</script>
<style scoped>
.el-card {
  margin-top: 15px;
}
.price-view{
  background-color: lawngreen;
  color: aqua;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
.el-table {
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>
